<template>
  <div class="common-wrapper l-f l-col-stretch">
    <div class="left">
      <a-card title="部门" style="height: 100%">
        <a-tree
          :show-line="true"
          :tree-data="treeData"
          :replaceFields="replaceFields"
          :autoExpandParent="true"
          :defaultExpandAll="true"
          multiple
          @select="onTreeSelect"
        />
      </a-card>
    </div>
    <div class="right">
      <div class="common-search">
        <a-form-model :model="queryForm" layout="inline">
          <a-form-model-item>
            <a-button @click="onBatchScheduling" type="primary" class="l-mg-r10" :disabled="!hasSelected"
              >轮班排班</a-button
            >
          </a-form-model-item>
          <a-form-model-item label="姓名">
            <a-input v-model="queryForm.name" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="工号">
            <a-input v-model="queryForm.id_card" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="工种">
            <a-select v-model="queryForm.work_type" mode="multiple" style="width: 185px">
              <a-select-option v-for="item in workList" :key="item.data_value">
                {{ item.data_name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item>
            <a-button @click="getTableData" type="primary" icon="search">搜索</a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
      <div class="common-main" ref="main">
        <a-table
          size="middle"
          rowKey="pkey"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="columns1"
          :scroll="{ y: 300,x: 1200 }"
          :data-source="dataSource"
          bordered
          :pagination="pagination"
          :loading="loading"
          @change="handleTableChange"
        >
        <template slot="index" slot-scope="text, record, index">
          {{ index + 1 }}
        </template>
        <template slot="is_black_list" slot-scope="text, record">
          <!-- 是否是黑名单 1不是 2是 0离职 -->
           {{record.is_black_list == 1 ? '不是' : record.is_black_list == 2 ? '是' : '离职'}}
        </template>
        <template slot="attend_type" slot-scope="text, record">
          <!-- 排班类型 0固定班次 1轮班班次 -->
           {{record.attend_type == 1 ? '轮班班次' : '固定班次'}}
        </template>
        </a-table>
        <!-- :row-selection="{ selectedRowKeys: userSelectedRowKeys, onChange: onUserSelectChange }" -->
        <a-table
          size="middle"
          rowKey="code"
          :columns="columns2"
          :scroll="{ y: 500, x: 1200 }"
          :data-source="userDataSource"
          bordered
          :pagination="userPagination"
          :loading="userLoading"
          @change="handleUserTableChange"
        >
        <template slot="index" slot-scope="text, record, index">
          {{ index + 1 }}
        </template>
        <template slot="plan_date" slot-scope="text, record">
           {{record.plan_date? record.plan_date.substring(0,10) : ''}}
        </template>
        <template slot="is_holiday" slot-scope="text, record">
           {{record.is_holiday? '休息' : '不休息'}}
        </template>
        <template slot="enable0" slot-scope="text, record">
           {{record.enable0? '启用' : '不启用'}}
        </template>
        <template slot="enable1" slot-scope="text, record">
           {{record.enable1 ? '启用' : '不启用'}}
        </template>
        <template slot="enable2" slot-scope="text, record">
           {{record.enable2? '启用' : '不启用'}}
        </template>
        </a-table>
      </div>
    </div>
    <SchedulingForm ref="schedulingFormRef" @success="saveSuccess" />
  </div>
</template>
  
  <script>
import SchedulingForm from './components/shiftScheduling/SchedulingForm.vue'
import { getDepartmentThreeListApi } from '@/api/people'
import { getDatadictionary } from '@/api/plan'
import { getScheduleAttClassListApi,getScheduleGetPlanListApi } from '@/api/attendance'
export default {
  components: {
    SchedulingForm,
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
  },
  data() {
    const columns1 = [
    {
        title: '编号',
        dataIndex: 'pkey',
        align: 'center',
        width: 60,
        // scopedSlots: { customRender: 'index' },
      },
      {
        title: '名称',
        dataIndex: 'person_name',
        align: 'center',
        width: 150,
      },
      {
        title: '性别',
        dataIndex: 'person_sex',
        align: 'center',
        width: 100
      },
      {
        title: '员工工号',
        dataIndex: 'person_idcard',
        align: 'center',
        width: 150,
      },
      {
        title: '工种',
        dataIndex: 'work_type_name',
        align: 'center',
        width: 150,
      },
      {
        title: '部门',
        dataIndex: 'dep_name',
        align: 'center',
        width: 150,
      },
      {
        title: '是否离职',
        dataIndex: 'is_black_list',
        align: 'center',
        width: 100,
        scopedSlots: { customRender: 'is_black_list' },
      },
      {
        title: '轮班班次名称',
        dataIndex: 'shift_name',
        align: 'center',
        width: 150,
      },
      {
        title: '轮班天数',
        dataIndex: 'shift_cyc',
        align: 'center',
        width: 150,
      },
    ]
    const columns2 = [
      {
        title: '编号',
        dataIndex: 'index',
        align: 'center',
        width: 60,
        scopedSlots: { customRender: 'index' },
      },
      {
        title: '计划日期',
        dataIndex: 'plan_date',
        align: 'center',
        width: 120,
        scopedSlots: { customRender: 'plan_date' },
      },
      {
        title: '星期',
        dataIndex: 'week',
        align: 'center',
        width: 60,
      },
      {
        title: '班次名称',
        dataIndex: 'shift_name',
        align: 'center',
        width: 150,
      },
      {
        title: '是否休息',
        dataIndex: 'is_holiday',
        align: 'center',
        width: 80,
        scopedSlots: { customRender: 'is_holiday' },
      },
      {
        title: '【启用-1',
        dataIndex: 'enable0',
        align: 'center',
        width: 60,
        scopedSlots: { customRender: 'enable0' },
      },
      {
        title: '类型-1',
        dataIndex: 'type_name0',
        align: 'center',
        width: 80,
      },
      {
        title: '上班-1',
        dataIndex: 'work_time0',
        align: 'center',
        width: 80,
      },
      {
        title: '下班-1】',
        dataIndex: 'after_time0',
        align: 'center',
        width: 80,
      },
      {
        title: '【启用-2',
        dataIndex: 'enable1',
        align: 'center',
        width: 60,
        scopedSlots: { customRender: 'enable1' },
      },
      {
        title: '类型-2',
        dataIndex: 'type_name1',
        align: 'center',
        width: 80,
      },
      {
        title: '上班-2',
        dataIndex: 'work_time1',
        align: 'center',
        width: 80,
      },
      {
        title: '下班-2】',
        dataIndex: 'after_time1',
        align: 'center',
        width: 80,
      },
      {
        title: '【启用-3',
        dataIndex: 'enable2',
        align: 'center',
        width: 60,
        scopedSlots: { customRender: 'enable2' },
      },
      {
        title: '类型-3',
        dataIndex: 'type_name2',
        align: 'center',
        width: 80,
      },
      {
        title: '上班-3',
        dataIndex: 'work_time2',
        align: 'center',
        width: 80,
      },
      {
        title: '下班-3】',
        dataIndex: 'after_time2',
        align: 'center',
        width: 80,
      },
    ]
    return {
      replaceFields: {
        children: 'childs',
        title: 'dep_name',
        key: 'pkey',
      },
      treeData: [
        {
          key: 0,
          dep_name: '全部',
          childs: [],
          disabled: true,
        },
      ],
      selectedKeys: [],
      queryForm: {
        name: '',
        id_card: '',
        work_type: [],
        attend_type: 1
      },
       // 工种列表
       workList: [],
      columns1,
      columns2,
      /* 分页参数 */
      pagination: {
        current: 1,
        pageSize: 20,
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        pageSizeOptions: ['10', '20', '30', '40', '50','100','500','1000'],
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      loading: false,
      dataSource: [],
      userQueryForm: {
        person_ids: '',
        // start_date: '',
        // end_date: ''
      },
      userDataSource: [],
      selectedRowKeys: [],
      selectedRows: [],
      userSelectedRowKeys: [],
      userSelectedRows: [],
      userLoading: false,
      /* 分页参数 */
      userPagination: {
        current: 1,
        pageSize: 20,
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        pageSizeOptions: ['10', '20', '30', '40', '50','100','500','1000'],
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      userLoading: false,
    }
  },
  created() {
    this.getWorkList()
    this.getDepartmentThreeList()
    this.getTableData()
    this.getScheduleGetPlanList()
  },
  methods: {
    onTreeSelect(selectedKeys, e) {
      this.selectedKeys = selectedKeys
      this.getTableData()
    },
    // 批量排班
    onBatchScheduling() {
      // 判断是否存在不同班次人员
      let shift_key = null
      let isEqual = true // 是否相同
      for (let i = 0; i < this.selectedRows.length; i++) {
        if(i === 0) {
          shift_key = this.selectedRows[i].shift_key
        }else {
          if(shift_key !== this.selectedRows[i].shift_key) {
            isEqual = false
            break
          }
        }
      }
      if(!isEqual) {
        this.$message.error('选择的人员中有不是同一轮班的人员！')
        return
      }
      this.$refs.schedulingFormRef.edit(this.selectedRowKeys,this.selectedRows[0].shift_key)
    },
    saveSuccess() {
      this.selectedRows = []
      this.selectedRowKeys = []
    },
    // 选择数据
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.userQueryForm.person_ids = selectedRowKeys.join(',')
      this.getScheduleGetPlanList()
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      this.getTableData()
    },
    // 选择数据
    onUserSelectChange(selectedRowKeys, selectedRows) {
      this.userSelectedRowKeys = selectedRowKeys
      this.userSelectedRows = selectedRows
    },
    handleUserTableChange(pagination, filters, sorter) {
      this.userPagination = pagination
      this.getScheduleGetPlanList()
    },
    // 获取列表数据
    async getTableData() {
      this.userLoading = true
      let department_names = this.selectedKeys.join(',')
      let work_types = this.queryForm.work_type.join(',')
      const { data } = await getScheduleAttClassListApi({
        ...this.queryForm,
        department_names,
        work_types,
        page_index: this.pagination.current,
        page_size: this.pagination.pageSize
      })
      this.userLoading = false
      this.dataSource = data.items
      this.pagination.total = data.totalCount
    },
    // 获取排班计划表
    async getScheduleGetPlanList() {
      this.userLoading = true
      const { data } = await getScheduleGetPlanListApi({
        ...this.userQueryForm,
        page_index: this.userPagination.current,
        page_size: this.userPagination.pageSize
      })
      this.userLoading = false
      let list = data.items
      for (let i = 0; i < list.length; i++) {
        let shift_period_time = list[i].shift_period_time
        if(shift_period_time && shift_period_time.length > 0) {
          for (let j = 0; j < shift_period_time.length; j++) {
            list[i]['after_time' + j] = shift_period_time[j].after_time
            list[i]['enable' + j] = shift_period_time[j].enable
            list[i]['type_name' + j] = shift_period_time[j].type_name
            list[i]['work_time' + j] = shift_period_time[j].work_time
          }
        }
      }
      this.userDataSource = list
      this.userPagination.total = data.totalCount
    },
    // 获取部门列表
    async getDepartmentThreeList() {
      const { data } = await getDepartmentThreeListApi()
      this.treeData[0].childs = data
    },
    // 获取工种列表
    async getWorkList() {
      const { data } = await getDatadictionary({ data_type: 3 })
      this.workList = this.workList.concat(data)
    },
  },
}
</script>
  
  <style lang="less" scoped>
.left {
  width: 200px;
}
.right {
  flex: 1;
  min-width: 0;
  padding-left: 20px;
  box-sizing: border-box;
}
.cancel-btn {
  background-color: #ff9f43;
  border-color: #ff9f43;
}
</style>